<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>团队购物清单</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <div class="container">
        <h1>团队购物清单</h1>
        <div class="team-members">
            <div class="member active" data-member="all">全部</div>
            <div class="member" data-member="xiangyang">向杨</div>
            <div class="member" data-member="changpeng">常鹏</div>
            <div class="member" data-member="jiangsiyu">蒋思宇</div>
            <div class="member" data-member="keyunhong">柯昀宏</div>
            <div class="member" data-member="yezhiwei">叶志威</div>
            <div class="member" data-member="yanghaomin">杨昊旻</div>
        </div>

        <div class="category-filters" style="text-align:center; margin: 15px 0;">
            <button class="category-btn active" data-category="all">全部分类</button>
            <button class="category-btn" data-category="水果">水果</button>
            <button class="category-btn" data-category="蔬菜">蔬菜</button>
            <button class="category-btn" data-category="日用品">日用品</button>
            <button class="category-btn" data-category="其他">其他</button>
        </div>

        <div class="add-item">
            <input type="text" id="newItem" placeholder="输入物品名称..." />
            <input type="number" id="quantityInput" min="1" value="1" style="width: 60px;" title="数量" />
            <select id="prioritySelect" title="优先级">
                <option value="高">高</option>
                <option value="中" selected>中</option>
                <option value="低">低</option>
            </select>
            <select id="categorySelect" title="分类">
                <option value="水果">水果</option>
                <option value="蔬菜">蔬菜</option>
                <option value="日用品">日用品</option>
                <option value="其他" selected>其他</option>
            </select>
            <button id="addButton">添加物品</button>
            <select id="memberSelect" title="添加人">
                <option value="xiangyang">向杨</option>
                <option value="changpeng">常鹏</option>
                <option value="jiangsiyu">蒋思宇</option>
                <option value="keyunhong">柯昀宏</option>
                <option value="yezhiwei">叶志威</option>
                <option value="yanghaomin">杨昊旻</option>
            </select>
        </div>

        <div class="shopping-list">
            <div class="list-header">
                <div>物品名称</div>
                <div>数量</div>
                <div>优先级</div>
                <div>分类</div>
                <div>添加人</div>
                <div>状态</div>
                <div>操作</div>
            </div>
            <div id="itemsList"></div>
        </div>

        <div class="instructions">
            <h3>团队协作说明：</h3>
            <ol>
                <li>每位成员克隆仓库到本地</li>
                <li>创建自己的分支：<code>git checkout -b [你的名字]</code></li>
                <li>添加你负责购买的物品</li>
                <li>提交并推送到你的分支</li>
                <li>创建Pull Request合并到主分支</li>
                <li>解决合并冲突（如有）</li>
            </ol>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>
